<template lang="pug">
.jing-footer
  van-button(type="primary" block @click="show = true" color="rgba(0,0,0,0.5)" v-show="!show") {{btnTxt}}
  van-action-sheet(v-model="show" :actions="getActions" @select="onSelect" :overlay="true" :round="false")

  //- MenuContents(ref="MenuContents")
</template>

<script>
import { mapGetters } from 'vuex'
import { DeepCloneData } from '@/utils'
import menuMixin from '@/mixins/menu'
export default {
  mixins: [menuMixin],
  data() {
    return {
      show: false,
      btnTxt: '全部',
      baseUrl: $globalconfig.URLS.API,
      // actions: [
      //   { name: '全部', menu_id: -1 },
      //   { name: '选项一' },
      //   { name: '选项二' },
      //   { name: '选项三' },
      // ],
    }
  },
  computed: {
    ...mapGetters([
      'panoInfo',
      'hotspots',
    ]),
    getActions() {
      if (this.panoInfo && this.panoInfo.menu_items && this.panoInfo.menu_items.bottommenu && this.panoInfo.menu_items.bottommenu.length > 0) {
        // console.log(this.panoInfo.menu_items)
        let botMenu = DeepCloneData(this.panoInfo.menu_items.bottommenu)
        botMenu.map(item => {
          item.name = item.title
        })
        botMenu.unshift({name: '全部', menu_id: -1})
        return botMenu
      } else {
        return [{ name: '全部', menu_id: -1 }]
      }
    },
  },
  methods: {
    // 获取热点数据
    handleHotSpotList(item) {
      if (this.hotspots) {
        let hotspots = []
        for (let i in this.hotspots) {
          if (this.hotspots[i] && this.hotspots[i].hotspotlist && this.hotspots[i].hotspotlist.length > 0) {
            hotspots = this.hotspots[i].hotspotlist
          }
          break
        }
        // console.log(hotspots)
        if (hotspots.length > 0) {
          if (!item) {
            hotspots.map(hot => {
              this.$krp._krpano.set(`hotspot[hotspot_hotspot_${hot.hot_id}].visible`, true)
            })
          } else {
            hotspots.map(hot => {
              if (hot.tag_id == item.data) {
                // console.log(hot.hot_id)
                this.$krp._krpano.set(`hotspot[hotspot_hotspot_${hot.hot_id}].visible`, true)
              } else {
                this.$krp._krpano.set(`hotspot[hotspot_hotspot_${hot.hot_id}].visible`, false)
              }
            })
          }
        }
      }
    },
    // 选中
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      console.log(item)
      this.show = false
      this.btnTxt = item.name
      if (item.menu_id == -1) {
        // console.log('-1-------------')
        this.handleHotSpotList()
      } else {
        // console.log('点击底部菜单')
        let obj = null
        
        if (item.type_id == 19) {
          // 多功能菜单
          // this.$refs.MenuContents.openDialog(item)
          if (item.data) {
            this.$vgo.emit('dialog:mutil', item)
          } else {
            this.$vgo.tip('没有数据可展示')
          }
        } else if (item.type_id == 20) {
          // 景区
          // console.log(this.hotspots)
          this.handleHotSpotList(item)
        } else if (item.type_id == 2) {
          // 图文
          this.$API('getGraphicDescript', [item.data]).then(res => {
            // console.log(res)
            if (res.code == 100) {
              obj = [{
                contents: res.data.contents,
                sort: 1,
                text: "图文",
                type: 1,
              }]
              this.$vgo.emit('dialog:mutil', {data: JSON.stringify(obj)})
              // this.$refs.MenuContents.openDialog({data: JSON.stringify(obj)})
            } else {
              this.$vgo.tip('获取数据出错')
            }
            
          })
          
        } else if (item.type_id == 4) {
          // 电话
          obj = [{
            contents: item.data,
            sort: 1,
            text: "联系方式",
            type: 2,
          }]
          // this.$refs.MenuContents.openDialog({data: JSON.stringify(obj)})
          this.$vgo.emit('dialog:mutil', {data: JSON.stringify(obj)})
        } else if (item.type_id == 8) {
          // 音频
          obj=[{
            contents: item.data.split('|')[0],
            fullaudio: this.baseUrl + item.data.split('|')[1],
            sort: "1",
            text: "音频",
            type: 5,
          }]
          // this.$refs.MenuContents.openDialog({data: JSON.stringify(obj)})
          this.$vgo.emit('dialog:mutil', {data: JSON.stringify(obj)})
        } else {
          this.handleBtMenu(item)
        }
      }
    },
  },
}
</script>

<style lang="stylus" scoped>
.jing-footer
  position absolute
  bottom 0
  z-index 3
  width 100%
  >>>.van-overlay
    background-color rgba(0,0,0,0)
  >>>.van-popup--bottom
    background-color rgba(0,0,0,0)
    .van-action-sheet__item
      background-color rgba(0,0,0,0.5)
      color #fff
</style>
